<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form-model :model="queryParam" layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="审核时间">
              <a-range-picker v-model="queryParam['filter[check_time]']" @change="changeCheckTime" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-model-item label="业务名称">
              <a-select
                show-search
                :filter-option="filterOption"
                v-model="queryParam['filter[business_id]']"
                placeholder="请选择业务名称"
              >
                <a-select-option v-for="(item,index) in businessOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <template v-if="advanced">

          </template>
          <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 5px" @click="reset">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div class="table-operator">
      <s-table
        bordered
        ref="table"
        size="middle"
        :row-key="(record) => record.business_id"
        :columns="stateColumns"
        :data="stateData"
      >
        <div slot="title">
          <a-button size="small" icon="export" type="primary" @click="onExport('4')">导出业务数量</a-button>
        </div>
        <template slot="con_num" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="official_fee" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="ratio" slot-scope="text,record">
          <a-tag color="red">{{`${(record.con_num/businessTotal * 100).toFixed(2)}%`}}</a-tag>
        </template>
      </s-table>
    </div>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import statsColumns from '@/columns/stats'
  import { getBusinessSum } from '@/api/stats'
  import apis from '@/api'
  import storage from 'store'

  export default {
    components: {
      STable
    },
    name: 'Business',
    data () {
      return {
        queryParam: {},
        advanced: false,
        stateColumns: statsColumns.b_state,
        businessTotal: 0,
        stateData: parameters => {
          return getBusinessSum(Object.assign(parameters, this.queryParam)).then(res => {
            this.businessOpts = res.result.businessOpts
            return res.result
          })
        },
        businessOpts: {},
        exportUrl: apis.ExportData,
        accessToken: storage.get('Access-Token'),
        company: storage.get('company')
      }
    },
    methods: {
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      reset () {
        this.queryParam = {}
        this.$refs.table.refresh(true)
      },
      changeCheckTime (date, dateString) {
        this.queryParam['filter[check_time_start]'] = dateString[0]
        this.queryParam['filter[check_time_end]'] = dateString[1]
      },
      onExport (type) {
        delete this.queryParam['check_time']
        let params = this.exportUrl + '?access_token=' + this.accessToken + '&type=' + type + '&company=' + this.company
        for (const k in this.queryParam) {
          params = params + '&' + k + '=' + this.queryParam[k]
        }
        window.open(process.env.VUE_APP_API_BASE_URL + params)
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      }
    }
  }
</script>

<style scoped>

</style>
